<template>
	<div class="nav-box">
		<dl class="flex-dl">
			<dd class="flex-dd"><a class="btn btn-default btn-lg outline" @click="addContact(departmentId)">添加联系人</a></dd>
			<dd class="flex-dd"><a class="btn btn-default btn-lg outline" @click="addDepartment(departmentId)">添加子部门</a></dd>
			<dd class="flex-dd" v-if="departmentId!=0"><a class="btn btn-default btn-lg outline" @click="setDepartment(departmentId)">部门设置</a></dd>
		</dl>
	</div>
</template>

<script>
export default {

  	name: 'nav-box',

  	props: {
  		departmentId: String
  	},

  	data () {
	    return {

	    };
  	},

  	methods: {
  		addContact (departmentId) {
  			this.bus.$emit('showAddContactTypeModal', true);
  		},
  		addDepartment (parentId) {
  			this.$router.push({
  				name: 'department_add',
  				params: {
  					parentId: parentId
  				}
  			});
  		},
  		setDepartment (departmentId) {
  			this.$router.push({
  				name: 'department_edit',
  				params: {
  					id: departmentId,
  					name: '',
  					sort: ''
  				}
  			});
  		}
  	}
};
</script>

<style lang="scss" scoped>
	@import '../../scss/mixin.scss';
	.nav-box{
		width: 100%;
		height: 100%;
		background: #fff;
		box-shadow: 0 0 5px 5px #f8f4f4;

		ul{
			width: 100%;
			overflow: hidden;
			white-space: normal;
			font-size: 0;

			li{
				display: inline-block;
				width: 33.333333%;
				line-height: 100px;
				text-align: center;
				padding: 0 20px;
				box-sizing: border-box;

				.btn{
					width: 100%;
				}
			}
		}

		.flex-dl{
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			height: 100%;

			.flex-dd{
				position: relative;
				flex: 1 0 auto;
				height: 100%;
				line-height: 100px;
				text-align: center;
				box-sizing: border-box;
				@include border-1px(#dcdcdc);

				.btn{
					width: 80%;
					min-width: 180px;
				}
			}
			
		}

	}
</style>